<!DOCTYPE html>
<html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Brands - Shoplook Multipurpose eCommerce Bootstrap5 Html Template</title>
    <meta name="description" content="description">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Favicon -->
    <link rel="shortcut icon" th:href="@{/assets/images/favicon.png}"/>
    <!-- Plugins CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/plugins.css}">
    <!-- Main Style CSS -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
    
    <style>
        .brand-item {
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            padding: 30px 20px;
            text-align: center;
            transition: all 0.3s ease;
            height: 100%;
        }
        .brand-item:hover {
            border-color: #007bff;
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0,123,255,0.15);
        }
        .brand-logo {
            width: 120px;
            height: 80px;
            object-fit: contain;
            margin-bottom: 20px;
        }
        .brand-name {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #333;
        }
        .brand-description {
            color: #666;
            font-size: 14px;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .brand-stats {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
            font-size: 12px;
            color: #888;
        }
        .brands-filter {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }
        .search-brands {
            max-width: 300px;
        }
    </style>
</head>
<body class="brands-page">
<!--Pre-Loader-->
<div id="pre-loader" class="preloader">
    <div class="preloader-in h2">
        <span>S</span><span>H</span><span>O</span><span>P</span><span>L</span><span>O</span><span>O</span><span>K</span>
    </div>
</div>
<!--End Pre-Loader-->
<div class="page-wrapper">
    <!--引入片段-->
    <div th:replace="~{include_header::header}"></div>

    <div id="page-content">
        <!--Body Container-->
        <!--Page Header-->
        <div class="page-header" th:style="|background-image: url(@{/assets/images/page-header/page-banner1.jpg})|">
            <div class="page-title"><h1>All Brands</h1></div>
            <!--Breadcrumbs-->
            <div class="breadcrumbs-wrapper">
                <div class="container">
                    <div class="breadcrumbs">
                        <a th:href="@{/}" title="Back to the home page">
                            <i class="an an-home icon-home"></i>
                        </a> 
                        <span aria-hidden="true"><i class="an an-angle-right"></i></span>
                        <span>Brands</span>
                    </div>
                </div>
            </div>
            <!--End Breadcrumbs-->
        </div>
        <!--End Page Header-->
        
        <div class="container">
            <!-- 品牌筛选 -->
            <div class="brands-filter">
                <div class="row align-items-center">
                    <div class="col-md-6">
                        <div class="input-group search-brands">
                            <input type="text" class="form-control" placeholder="Search brands..." 
                                   th:value="${keyword}" id="brand-search">
                            <button class="btn btn-outline-secondary" type="button" onclick="searchBrands()">
                                <i class="an an-search"></i>
                            </button>
                        </div>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <span class="text-muted">
                            Showing <span th:text="${#lists.size(brands)}">0</span> brands
                        </span>
                    </div>
                </div>
            </div>
            
            <!-- 品牌列表 -->
            <div class="row">
                <!-- 如果没有品牌 -->
                <div th:if="${#lists.isEmpty(brands)}" class="col-12">
                    <div class="text-center py-5">
                        <i class="an an-tag" style="font-size: 48px; color: #ccc;"></i>
                        <h4 class="mt-3">No Brands Found</h4>
                        <p th:if="${keyword}" class="text-muted">No brands match your search criteria.</p>
                        <p th:unless="${keyword}" class="text-muted">No brands available at the moment.</p>
                        <a th:href="@{/brands}" class="btn btn-primary" th:if="${keyword}">View All Brands</a>
                    </div>
                </div>
                
                <!-- 品牌项 -->
                <div th:each="brand : ${brands}" class="col-lg-3 col-md-4 col-sm-6 mb-4">
                    <div class="brand-item">
                        <a th:href="@{/goods(brandId=${brand.id})}">
                            <img th:src="@{${brand.logo ?: '/assets/images/logo/default-brand.png'}}" 
                                 class="brand-logo" th:alt="${brand.name}">
                            <h5 class="brand-name" th:text="${brand.name}">Brand Name</h5>
                            <p class="brand-description" th:text="${brand.description ?: 'Quality products for modern lifestyle'}">
                                Brand description
                            </p>
                            <div class="brand-stats">
                                <span><i class="an an-bag"></i> <span th:text="${brand.productCount ?: 0}">0</span> Products</span>
                                <span th:if="${brand.establishedYear}">
                                    <i class="an an-calendar"></i> Est. <span th:text="${brand.establishedYear}">2020</span>
                                </span>
                            </div>
                            <div class="btn btn-outline-primary btn-sm">
                                View Products <i class="an an-arrow-right"></i>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- 分页 -->
            <div th:if="${totalPages > 1}" class="pagination-wrapper text-center mt-4">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        <li th:class="|page-item ${currentPage == 1 ? 'disabled' : ''}|">
                            <a class="page-link" th:href="@{/brands(page=${currentPage - 1}, keyword=${keyword})}">Previous</a>
                        </li>
                        <li th:each="pageNum : ${#numbers.sequence(1, totalPages)}" 
                            th:class="|page-item ${pageNum == currentPage ? 'active' : ''}|">
                            <a class="page-link" th:href="@{/brands(page=${pageNum}, keyword=${keyword})}" th:text="${pageNum}">1</a>
                        </li>
                        <li th:class="|page-item ${currentPage == totalPages ? 'disabled' : ''}|">
                            <a class="page-link" th:href="@{/brands(page=${currentPage + 1}, keyword=${keyword})}">Next</a>
                        </li>
                    </ul>
                </nav>
            </div>
            
            <!-- 热门品牌推荐 -->
            <div th:if="${hotBrands and !#lists.isEmpty(hotBrands)}" class="section mt-5">
                <div class="section-header text-center mb-4">
                    <h3>Popular Brands</h3>
                    <p class="text-muted">Discover our most popular brands</p>
                </div>
                <div class="row">
                    <div th:each="hotBrand : ${hotBrands}" class="col-lg-2 col-md-3 col-sm-4 col-6 mb-3">
                        <a th:href="@{/goods(brandId=${hotBrand.id})}" class="text-center d-block p-3 border rounded">
                            <img th:src="@{${hotBrand.logo ?: '/assets/images/logo/default-brand.png'}}" 
                                 class="img-fluid" style="max-height: 50px;" th:alt="${hotBrand.name}">
                            <small class="d-block mt-2 text-muted" th:text="${hotBrand.name}">Brand</small>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--Footer-->
    <div th:replace="~{include_header::footer}"></div>
    <!--End Footer-->
</div>

<!--Plugins JS-->
<script th:src="@{/assets/js/plugins.js}"></script>
<!--Main JS-->
<script th:src="@{/assets/js/main.js}"></script>

<script>
// 搜索品牌
function searchBrands() {
    const keyword = document.getElementById('brand-search').value.trim();
    const url = new URL(window.location);
    if (keyword) {
        url.searchParams.set('keyword', keyword);
    } else {
        url.searchParams.delete('keyword');
    }
    url.searchParams.set('page', '1');
    window.location = url;
}

// 回车搜索
document.getElementById('brand-search').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        searchBrands();
    }
});
</script>
</body>
</html> 